<template>
  <div class="prop-child mb-4 relative px-8">
    <div v-for="(item, key) in comData" class="relative">
      <div class="item mb-6" @click="item.expand = !item.expand" v-if="item.type !== 'file'">
        <div class="flex justify-between align-center py-4 flex-wrap">
          <div>
            <span class="cursor-pointer" @click="copyText(item.title)">
              <div>
                <span>
                  <caret-down-outlined
                    class="mr-4"
                    v-if="item.expand && item.children.length > 0"
                  />
                  <caret-right-outlined class="mr-4" v-else-if="item.children.length !== 0" />
                </span>
                <span>{{ item.title }}</span>
                <span class="text-666" v-if="item.children.length !== 0">
                  [{{ item.children.length }}]
                </span>
                <a-typography-text type="danger" class="ml-8 text-12" v-if="item.require">
                  *必填
                </a-typography-text>
              </div>
            </span>
            <div
              class="text-999 text-12 mt-4 tips"
              v-if="projectMode.viewMode && item.type !== 'folder'"
            >
              <span>提示:</span>
              <span class="text-ddd" v-if="item.desc !== ''">{{ item.desc }}</span>
              <span class="text-666" v-else>没有描述信息</span>
            </div>
          </div>
          <!-- 右侧值填写 -->

          <div v-if="projectMode.editMode">
            <!-- 选择类型 -->
            <div v-if="item.type == 'props'">
              <!-- 当为字符串 -->
              <div v-if="item.valueType === 'string'">
                <!-- 普通字符串 -->
                <div v-if="item.config.text.type === 'string'">
                  <a-input
                    size="small"
                    :placeholder="item.desc"
                    :bordered="item.canEdit"
                    :disabled="!item.canEdit"
                    v-model:value="item.value"
                  ></a-input>
                </div>
                <!-- 数字 -->
                <div v-if="item.config.text.type === 'number'">
                  <a-input-number
                    size="small"
                    :placeholder="item.desc"
                    :bordered="item.canEdit"
                    :disabled="!item.canEdit"
                    v-model:value="item.value"
                    :min="item.config.text.min"
                    :max="item.config.text.max"
                  ></a-input-number>
                </div>
                <!-- 文本域 -->
                <div v-if="item.config.text.type === 'textarea'">
                  <a-textarea
                    size="small"
                    :placeholder="item.desc"
                    :bordered="item.canEdit"
                    :disabled="!item.canEdit"
                    v-model:value="item.value"
                    :autoSize="{ minRows: 2, maxRows: 8 }"
                  ></a-textarea>
                </div>

                <!-- 密码 -->
                <div v-if="item.config.text.type === 'password'">
                  <a-input-password
                    size="small"
                    :disabled="!item.canEdit"
                    v-model:value="item.value"
                    :placeholder="item.desc"
                  />
                </div>

                <!-- 日期  -->
                <div v-if="item.config.text.type === 'date'">
                  <a-date-picker
                    v-model:value="item.date"
                    :disabled="!item.canEdit"
                    size="small"
                    :placeholder="item.desc"
                  />
                </div>

                <!-- 时间  -->
                <div v-if="item.config.text.type === 'time'">
                  <a-time-picker
                    v-model:value="item.time"
                    size="small"
                    :disabled="!item.canEdit"
                    :placeholder="item.desc"
                  />
                </div>

                <!-- 颜色  -->
                <div v-if="item.config.text.type === 'color'">
                  <input
                    type="color"
                    class="input-color"
                    v-model="item.value"
                    :disabled="!item.canEdit"
                  />
                </div>
              </div>
              <!-- 当为多选 -->
              <div v-if="item.valueType === 'multiple'">
                <!-- 当为下拉菜单 -->
                <div v-if="item.config.multiple.list.length > 0">
                  <div v-if="item.config.multiple.type === 'dropdown'">
                    <a-select
                      v-model:value="item.value"
                      :disabled="!item.canEdit"
                      :options="item.config.multiple.list"
                      size="small"
                      :placeholder="item.desc"
                    ></a-select>
                  </div>
                  <!-- 当为单选 -->
                  <div v-if="item.config.multiple.type === 'ratio'">
                    <a-radio-group v-model:value="item.value">
                      <a-radio v-for="m in item.config.multiple.list" :value="m.value">
                        <span class="text-white">{{ m.label }}</span>
                      </a-radio>
                    </a-radio-group>
                  </div>
                </div>

                <div v-else>
                  <a-input
                    size="small"
                    :placeholder="item.desc"
                    :disabled="!item.canEdit"
                    v-model:value="item.value"
                  ></a-input>
                </div>
              </div>

              <!-- 当为布尔类型 -->
              <div v-else-if="item.valueType === 'boolean'">
                <a-switch
                  v-model:checked="item.value"
                  checked-children="是"
                  un-checked-children="否"
                  :disabled="!item.canEdit"
                  :placeholder="item.desc"
                />
              </div>

              <!-- 当为评分类型 -->
              <div v-else-if="item.valueType === 'star'">
                <a-rate size="small" v-model:value="item.value" :disabled="!item.canEdit" />
              </div>
              <!-- 当为图片类型 -->
              <div v-else-if="item.valueType === 'image'">
                <a-image
                  :width="25"
                  :height="25"
                  :fallback="loadImage('fail.svg')"
                  v-for="(v, k) in item.config.image.list"
                  :src="v.src"
                  :preview="false"
                  v-if="item.config.image.list.length > 0"
                ></a-image>

                <a-upload
                  v-else
                  name="avatar"
                  list-type="picture-card"
                  class="avatar-uploader"
                  :show-upload-list="false"
                  @change="uploadImage"
                  v-model:file-list="item.config.image.cacheList"
                  :max-count="1"
                  @click="selectImageItem(item)"
                >
                  <div>
                    <PlusOutlined></PlusOutlined>
                    <div class="ant-upload-text">上传</div>
                  </div>
                </a-upload>
              </div>
            </div>
          </div>
          <div v-else>
            <span class="text-999" v-if="item.value !== ''">{{ item.value }}</span>
            <span class="text-666" v-else>空值</span>
          </div>
        </div>

        <a-divider style="background-color: #666" class="my-4"></a-divider>
      </div>
      <!-- 文件 -->
      <div v-else-if="item.type === 'file'">
        <div v-if="item.headers.length > 0" class="file-type px-4 py-2">
          <InTable
            :plain="!projectMode.editMode"
            v-model:headers="item.headers"
            v-model:values="item.values"
            :title="item.title"
            :read-only="!projectMode.editMode"
          />
        </div>
      </div>
      <PropChild
        :data="item.children"
        v-if="item.children.length > 0 && item.expand"
        class="ml-1"
      ></PropChild>
      <div class="subline" v-if="item.children.length !== 0 && item.expand"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { projectMode } from "@/data/config";
import { copyText, getObjectType, loadImage } from "@/utils/utils";
import { computed, onMounted, ref } from "vue";
import Empty from "../components/InEmpty.vue";
import DynamicTable from "./DynamicTable.vue";
import { UploadChangeParam } from "ant-design-vue/lib/upload/interface";
import { treeType } from "@/types/project";
import InTable from "../components/InTable.vue";
import InListItem from "../components/InListItem.vue";
import InDialog from "../components/InDialog.vue";
import { PlusOutlined } from "@ant-design/icons-vue";
const selectImageItem = (item: treeType) => {
  currentItem.value = item;
};

/* 上传文件 */
const uploadImage = (param: UploadChangeParam) => {
  var { fileList } = param;
  fileList.forEach((item) => {
    var { originFileObj } = item;
    const reader = new FileReader();
    if (originFileObj) reader.readAsDataURL(originFileObj);
    reader.onload = () => {
      currentItem.value.config.image.list.push({
        src: reader.result,
        text: item.name
      });
      currentItem.value.value += item.name;
    };
  });
};

const currentItem = ref();
const props = defineProps({
  data: null as any
});
const pageConfig = ref({
  inputWidth: 200
});
onMounted(() => {
  var maxWidth = window.innerWidth;
  // 小设备
  if (maxWidth < 600) {
    pageConfig.value.inputWidth = 140;
  }
});

const comData = computed(() => {
  if (!props.data) return;
  if (getObjectType(props.data) === "array") {
    return props.data;
  } else {
    return props.data.children;
  }
});
</script>
<script lang="ts">
export default {
  name: "PropChild",
  components: { Empty, DynamicTable, InTable, InListItem, InDialog, PlusOutlined }
};
</script>
<style lang="scss" scoped>
.prop-child {
  border-radius: 4px;
  .item {
    &:hover {
      background-color: #7979791e;
    }
    border-radius: 4px;
  }
  .subline {
    position: absolute;
    left: 0;
    width: 1px;
    height: 100%;
    top: 0;
    border-left: 1px solid #666;
  }
}

::v-deep(.ant-input-affix-wrapper) {
  background-color: transparent !important;
  background: transparent !important;
}
::v-deep(.ant-picker) {
  background-color: transparent !important;
  background: transparent !important;
}

/*w文件夹 */
.file-type {
  margin-bottom: 4px;
}

::v-deep(.ant-upload.ant-upload-select-picture-card) {
  background-color: transparent !important;
  width: 80px;
  height: 80px;
}
.tips {
  max-width: 160px;
}
::v-deep(.ant-input-number-input-wrap) {
  input {
    width: 140px !important;
  }
}

::v-deep(.ant-input-affix-wrapper){
  width: 140px !important;
}
::v-deep(.ant-picker ){
  width: 140px !important;
}
::v-deep(.ant-input) {
  width: 140px !important;
}
::v-deep(.ant-select-selector) {
  width: 140px !important;
}
input {
  width: 140px !important;
}
</style>
